react学习(一)

<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>

JSX

<div id="example"></div>

<script type="text/babel">
  ReactDOM.render(
    <span>Hello React!</span>,
    document.getElementById('example')
  );
</script>

1. ReactDOM.render方法接受两个参数：一个虚拟 DOM 节点和一个真实 DOM 节点，作用是将虚拟 DOM 挂载到真实 DOM。

React 组件语法

<div id="example"></div>

<script type="text/babel">
   class MyTitle extends React.Component {
      render() {
         return <h1>Hello World</h1>;
   }
 };

 ReactDOM.render(
   <MyTitle/>,
   document.getElementById('example')
 );
</script>

或者：

<script type="text/babel">
      var MyTitle = React.createClass({
        render () {
              return <h1>Hello World2</h1>
        }
      });

      ReactDOM.render(
        <MyTitle/>,
        document.getElementById('example')
      );
</script>

1. class MyTitle extends React.Component是 ES6 语法，表示自定义一个MyTitle类，该类继承了基类React.Component的所有属性和方法。

2. React 规定，自定义组件的第一个字母必须大写，比如MyTitle不能写成myTitle，以便与内置的原生类相区分。

3. 每个组件都必须有render方法，定义输出的样式。

4. <MyTitle/>表示生成一个组件类的实例，每个实例一定要有闭合标签，写成<MyTilte></MyTitle>也可。

组件的参数

<div id="example"></div>

<script type="text/babel">
    class MyTitle extends React.Component {
        render() {
           return <h1 style={{color: this.props.color}}>Hello World</h1>;
        }
   };

  ReactDOM.render(
      <MyTitle color="red" />,
      document.getElementById('example')
 );
</script>

1. 组件内部通过this.props对象获取参数。

组件的状态 this.state

实例一

<div id="example"></div>

<script type="text/babel">
 class MyTitle extends React.Component {
constructor(...args) {
  super(...args);
  this.state = {
    name: '访问者'
  };
}

handleChange(e) {
  let name = e.target.value;
  this.setState({
    name: name
  });
}

 render() {
  return <div>
    <input type="text" onChange={this.handleChange.bind(this)} />
    <p>你好，{this.state.name}</p>
  </div>;
 }
};

ReactDOM.render(
   <MyTitle/>,
  document.getElementById('example')
);
</script>

实例二

<div id="example"></div>

<script type="text/babel">    
 class MyTitle extends React.Component {
constructor(...args) {
  super(...args);
  this.state = {
    text: 'World',
    isClicked: false
  };
}

handleClick() {
  let d = new Date();
  let time = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日';
  let isClicked = !this.state.isClicked;
  console.log(isClicked);
  this.setState({
    isClicked: isClicked,
    text: isClicked ? time : 'World'
  });
}

render() {
  return <h1 onClick={this.handleClick.bind(this)}>
    {'Hello ' + this.state.text}
  </h1>;
}

};

ReactDOM.render(
   <MyTitle/>,
   document.getElementById('example')
);
</script>

React 组件的生命周期

componentWillMount()：组件加载前调用
componentDidMount()：组件加载后调用
componentWillUpdate(): 组件更新前调用
componentDidUpdate(): 组件更新后调用
componentWillUnmount()：组件卸载前调用
componentWillReceiveProps()：组件接受新的参数时调用

实例一

<div id="example"></div>

<script type="text/babel">
  class MyList extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        loading: true,
        error: null,
        data: null
      };
    }

  componentDidMount() {
    const url = 'https://api.github.com/search/repositories?q=javascript&sort=stars';
    $.getJSON(url)
     .done(
      (value) => this.setState({
        loading: false,
        data: value
      })
    ).fail(
      (jqXHR, textStatus) => this.setState({
        loading: false,
        error: jqXHR.status
      })
    );
  }

  render() {
    
  if (this.state.loading) {
    return <span>Loading...</span>;
  } else if (this.state.error !== null) {
    return <span>Error: {this.state.error}</span>;
  } else {
    /* 你的代码填入这里 */
    return (
      <div>
        <p>API 数据获取成功</p>
        <p>改写代码，将结果显示在这里</p>
      </div>
    );
  }
  }
};

  ReactDOM.render(
    <MyList/>,
    document.getElementById('example')
  );
</script>

实例二

<div id="example"></div>

<script type="text/babel">    
var Hello = React.createClass({
   getInitialState: function () {
      return {
        opacity: 1.0
      };
   },

   componentDidMount: function () {
      this.timer = setInterval(function () {
         var opacity = this.state.opacity;
         opacity -= .05;

         if (opacity < 0.1) {
           opacity = 1.0;
         }

         this.setState({
            opacity: opacity
         });
      }.bind(this), 100);
   },

   render: function () {
      return (
        <div style={{opacity: this.state.opacity}}>

          Hello {this.props.name}
        </div>
      );
   }
});

ReactDOM.render(
    <Hello name="world"/>,
    document.getElementById('example')
);
</script>   

为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

实例三：组件的嵌套

<div id="example"></div>

<script type="text/babel">    
var Search = React.createClass({
   render: function () {
      return (
        <div>
           {this.props.searchType}: <input type="text" />
           <button>Search </button>
        </div>
      );
   }
});

var Page = React.createClass({
   render: function () {
      return (
        <div>
           <h1>Welcome!</h1>
           <Search searchType = "Title" />
           <Search searchType = "Content" />
        </div>
      );
   }
});

ReactDOM.render(
    <Page/>,
    document.getElementById('example')
);
</script>

ref

有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性

实例：

<div id="example"></div>
<script type="text/babel">    
var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);
</script>